<template>
	<view class="container">
		<view class="head"></view>
		<view class="body">
			<view class="line">
				<text>路由：</text>
				<!-- <text class="line_txt" v-for="(item,index) in line" :key="index">{{item.outlet_name}}</text> -->
				<view style="color: white;font-weight: 600;">{{truck.addrfrom}} - {{truck.addrto}}</view>
			</view>
			<view class="dang">
				<text>档口：{{truck.addrfromnode}}</text>
				<!-- 				<view class="map" @click="getlocation">
					<image src="/static/img/dingwei-2.png" mode=""></image>
					<text>去这里</text>
				</view> -->
			</view>
			<view class="address">
				<!-- <text>接货地址：{{orderdata.outlet_info.province+orderdata.outlet_info.city+orderdata.outlet_info.area+orderdata.outlet_info.address}}</text> -->
				<text>接货地址：顺和国际智慧物流园</text>
			</view>
		</view>
		<view class="money">
			<view class="yun">
				<text>保证金</text>
				<text class="yun_money">{{fee.bond}}</text>
			</view>
			<view class="yun">
				<text>垫资金额</text>
				<text class="yun_money">{{fee.advance_amount}}</text>
			</view>
			<view class="yun">
				<text>大车费</text>
				<text class="yun_money">{{fee.freight}}</text>
			</view>
		</view>
		<view class="btn" style="padding: 60rpx;">
			<u-button type="primary" text="确认接单" shape="circle" color="#1890FF" @click="todriver"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style: { color: '#fff' },
				orderdata: '',
				line: '',
				lat: 0,
				lng: 0,
				shareid: 0,
				address: '',
				truck: {}, // 车次数据
				fee: {}, // 保证金/垫资/大车费
			};
		},
		onLoad(opt) {
			console.log(opt)
			this.truck = JSON.parse(opt.truck)
			this.fee = JSON.parse(opt.fee)
			this.shareid = opt.shareid

			// console.log('确认接单页面.shareid = ', this.shareid);
			// console.log('确认接单页面.truck = ', this.truck);
		},
		onBackPress() {
			return false
		},
		onShow() {
			// this.getdata()
		},
		methods: {
			//跳转司机端
			todriver() {
				// 优化传递的数据 防止数据量过大造成分享失败
				let newTruck = {
					transferid: this.truck.transferid,
					addrfrom: this.truck.addrfrom,
					addrto: this.truck.addrto,
					addrfromnode: this.truck.addrfromnode,
				}
				let url = `pages/index/index?id=${this.shareid}&truck=${JSON.stringify(newTruck)}`
				console.log('跳转到司机页面的url = ', url);
				uni.navigateToMiniProgram({
					// 打开的小程序版本,develop开发版 trial 体验版 release 正式版 仅当前小程序为开发版或体验版时此参数有效 如当前是正式版 则打开的小程序必定是正式版
					envVersion: 'trial',
					appId: 'wx8adebfe476054e45',
					// path: 'pages/index/index?id=' + this.shareid, // 不填默认首页
					path: url,
					// extraData: {
					//   'data1': 'test'
					// },
					success(res) {
						// 打开成功
					}
				})
			},
			//接单数据
			getdata() {
				this.$receiving({ share_id: this.shareid, type: 1, }).then(res => {
					this.orderdata = res.data
					this.lat = res.data.outlet_info.lat
					this.lng = res.data.outlet_info.lon
					this.address = res.data.outlet_info.province + res.data.outlet_info.city + res.data.outlet_info
						.area + res.data.outlet_info.address
					let line = res.data.json_line
					this.line = JSON.parse(line)
				})
			},
			//定位
			getlocation() {
				uni.getFuzzyLocation({
					type: "gcj02",
					success: (res) => {
						uni.openLocation({
							latitude: Number(this.lat),
							longitude: Number(this.lng),
							name: this.address,
							success: () => {
								console.log('success')
							}
						})
					}
				})
			},
			rightClick() {
				console.log('rightClick');
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;

	}

	.container {
		.body {
			background: #1890FF;
			padding: 30rpx 20rpx;
			display: flex;
			flex-direction: column;
			height: 300rpx;
			justify-content: space-around;

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 600;
			}

			.line {
				display: flex;

				.line_txt {
					&:after {
						content: "-";

					}

					&:last-child {
						&:after {
							content: "";
						}
					}
				}
			}

			.dang {
				display: flex;
				justify-content: space-between;

				.map {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}

			.address {}
		}

		.money {
			display: flex;

			align-items: center;
			justify-content: space-evenly;
			padding: 100rpx;

			.yun {
				height: 120rpx;
				justify-content: space-between;
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-weight: 600;
					color: #000;
					font-size: 38rpx;
				}

				.yun_money {
					color: #1890FF;
				}
			}
		}
	}
</style>